<template>
    <div>
        <div>
            <el-tree
                    :load="loadTreeNodes"
                    :props="defaultProps"
                    lazy
                    highlight-current
                    :render-content="renderContent"
                    @node-click="handleNodeClick"
                    :expand-on-click-node="false"
            />

            <el-dialog
                    title="提示"
                    :visible.sync="dialogVisible"
                    width="30%"
            >
                <span>
                <el-input v-model="categoryName" aria-placeholder="请添加分类广告名称"/>
            </span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="confirmClick">确 定</el-button>
                  </span>
            </el-dialog>
            <el-dialog
                    title="提示"
                    :visible.sync="dialogUpdateVisible"
                    width="30%"
            >
                <span>
                <el-input v-model="UpdateCategoryName" aria-placeholder="修改广告名称"/>
            </span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogUpdateVisible = false">取 消</el-button>
                    <el-button type="primary" @click="UpdateConfirmClick">确 定</el-button>
                  </span>
            </el-dialog>
        </div>

    </div>
</template>

<script>
    export default {
        name: "ContentPaging",
        inject:["reload"],
        data(){
            return{
                categoryName:"",
                defaultProps:{
                    children: "children",
                    label: "name",
                    currentCategory:{}
                },
                dialogVisible:false,
                dialogUpdateVisible:false,
                UpdateCategoryName:"",
                addCategoryObj:{},
                UpdateCategoryObj:{}
            }
        },
        methods:{
            renderContent(h, { node, data, store }){
                return(
                    <span className="custom-tree-node">
            <span>{node.label}</span>
            <span>
              <el-button size="mini" type="text" on-click={() => this.append(data)}>添加</el-button>
              <el-button size="mini" type="text" on-click={() => this.remove(node, data)}>删除</el-button>
              <el-button size="mini" type="text" on-click={() => this.amend(node, data)}>修改</el-button>
            </span>
          </span>
                )
            },
            // 添加广告
            append(data){
                // console.log(data);
                this.dialogVisible = true;
                this.addCategoryObj = data;
            },

            // 修改广告
            amend(node,data){
                this.dialogUpdateVisible = true;
                this.UpdateCategoryName = data.name;
                this.UpdateCategoryObj = data;
                // console.log(data);
            },
            UpdateConfirmClick(){
                this.$api.getUpdateContentCategory({
                    id:this.UpdateCategoryObj.pid,
                    name:this.UpdateCategoryName
                }).then(res=>{
                    if (res.data.status === 200) {
                        this.reload();
                    }else {
                        alert('修改失败');
                    }
                })
            },
            // 删除广告
            remove(node,data){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$api.getDeleteContentCategoryById({
                        id:data.pid
                    }).then(res=>{
                        // console.log(res.data);
                        if (res.data.status === 200){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.reload();

                        }else {
                            this.$message({
                                type: 'error',
                                message: '删除失败!'
                            });
                            // alert('')
                        }
                    }).catch(error=>{
                        this.$message({
                            type: 'error',
                            message: '删除失败!'
                        });
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });


            },
            // 确定添加
            confirmClick(){
                this.$api.getInsertContentCategory({
                    pid:this.addCategoryObj.pid,
                    name:this.categoryName
                }).then(res=>{
                    if (res.data.status === 200){
                        alert('添加成功');
                        this.reload();
                        this.dialogVisible = false;
                    }else {
                        alert('添加失败');
                    }
                });

            },
            loadTreeNodes(node, resolve){

                this.currentCategory = node.data;
                if (node.level === 0) {
                    console.log('123');
                    this.$api.getSelectContentCategoryByParentId().then(res=>{
                        console.log(res.data);
                        if (res.status === 200){

                            console.log(res.data);
                            return resolve(res.data.data);
                        }else {
                            alert('请求失败');
                        }
                    });
                }

                if (node.level >= 1){
                    console.log(1111);
                    this.$api.getSelectContentCategoryByParentId({
                        id:node.data.pid
                    }).then(res=>{
                        console.log(res.data);
                        if (res.status === 200){
                            return resolve(res.data.data);
                        }else {
                            alert('请求失败');
                        }
                    }).catch(error=>{
                        resolve([]);
                    })
                }
            },
            handleNodeClick(data){
                this.$emit('handleData',data);
                // console.log(data);
            },
        }
    }
</script>

<style scoped>

</style>